<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="4">
        <!-- tree组件 -->
        <el-tree :data="treeData" :default-expand-all="true" :props="defaultProps" @node-click="handleNodeClick" />
      </el-col>
      <el-col :span="20">
        <!-- 条件搜索框 -->
        <div>
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="用户昵称">
              <el-input v-model="searchForm.nickname" size="small" placeholder="请输入用户昵称" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" icon="el-icon-search" @click="onSubmit">查询</el-button>
              <el-button type="info" size="small" icon="el-icon-refresh" @click="restBtn">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 按钮组 -->
        <el-row>
          <el-button type="primary" size="mini" icon="el-icon-plus" plain @click="addUserDialog">新增</el-button>
        </el-row>

        <!-- 数据展示 -->
        <el-table v-loading="loading" :data="userList">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="用户编号" prop="id" width="100" />
          <el-table-column label="用户名称" prop="username" :show-overflow-tooltip="true" width="100" />
          <el-table-column label="用户昵称" prop="nickname" :show-overflow-tooltip="true" width="100" />
          <el-table-column label="部门" prop="deptId" width="100" />
          <el-table-column label="OA账号" prop="oaAccount" width="100">
            <template slot-scope="scope">
              <el-tag size="mini">{{ scope.row.oaAccount }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="150" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="editDialogHandler(scope.row)"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- dialog -->
    <el-dialog
      title="添加角色"
      :visible.sync="addUserVisible"
      width="30%"
    >
      <el-form ref="addUserForm" label-width="80px" :model="addUserForm" :rules="addUserRules">
        <el-form-item label="用户账号" prop="username">
          <el-input v-model="addUserForm.username" size="small" placeholder="请输入用户账号" />
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model="addUserForm.nickname" size="small" placeholder="请输入用户昵称" />
        </el-form-item>
        <el-form-item label="用户部门" prop="deptId">
          <el-select v-model="addUserForm.deptId" placeholder="请选择部门" size="small" style="width:100%">
            <el-option v-for="dept,index in deptData" :key="index" :label="dept.deptName" :value="dept.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属角色" prop="roleId">
          <el-select v-model="addUserForm.roleId" placeholder="请选择部门" size="small" style="width:100%">
            <el-option v-for="role,index in roleData" :key="index" :label="role.roleName" :value="role.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="OA账号" prop="oaAccount">
          <el-input v-model="addUserForm.oaAccount" size="small" placeholder="请输入OA账号" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="addUserVisible = false">取 消</el-button>
        <el-button type="primary" size="small" @click="addUserHandler">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑用户 -->
    <el-dialog
      title="编辑用户"
      :visible.sync="editUserVisible"
      width="50%"
    >
      <el-form ref="editUserForm" label-width="80px" :model="editUserForm" :rules="addUserRules">
        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model="editUserForm.nickname" size="small" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="OA账号" prop="oaAccount">
          <el-input v-model.number="editUserForm.oaAccount" size="small" placeholder="请输入权限字符" />
        </el-form-item>
        <el-form-item label="用户部门" prop="deptId">
          <el-select v-model="editUserForm.deptId" placeholder="请选择部门" size="small" style="width:100%">
            <el-option v-for="dept,index in deptData" :key="index" :label="dept.deptName" :value="dept.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="editUserVisible = false">取 消</el-button>
        <el-button type="primary" size="small" @click="editUserHandler">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { queryDept } from '@/api/dept'
import { getRole } from '@/api/role'
import { getUsers, delUser, deptUser, updateUser, addUser } from '@/api/user'
import { toTree } from '@/utils/common'
export default {
  name: 'Index',
  data() {
    return {
      searchForm: {
        nickname: ''
      },
      treeSerach: '',
      treeData: [],
      defaultProps: {
        children: 'child',
        label: 'deptName'
      },
      loading: true,
      userList: [],
      // 添加角色的dialog
      addUserVisible: false,
      // 添加角色的表单数据
      addUserForm: {
        username: '',
        nickname: '',
        deptId: '',
        oaAccount: '',
        roleId: ''
      },
      // 添加用户的表单验证规则
      addUserRules: {
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        deptId: [
          { required: true, message: '请选择部门', trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: '请选择角色', trigger: 'blur' }
        ]
      },
      page: 1,
      limit: 5,
      total: 10,
      // 编辑用户的dialog
      editUserVisible: false,
      // 编辑角色的表单数据
      editUserForm: {
        nickname: '',
        deptId: '',
        oaAccount: '',
        id: ''
      },
      deptData: [],
      roleData: []
    }
  },
  created() {
    this.getDeptTree()
    this.getUserData()
    this.getRoleData()
  },
  methods: {
    // 搜索
    onSubmit() {
      this.getUserData()
    },
    // 打开添加角色的dialog
    addUserDialog() {
      this.addUserVisible = true
    },
    // 添加角色的按钮点击事件
    addUserHandler() {
      this.$refs['addUserForm'].validate((valid) => {
        if (valid) {
          addUser(this.addUserForm).then(res => {
            this.$message({ message: res.msg, type: 'success' })
            this.addUserVisible = false
            this.getUserData()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取部门树信息
    getDeptTree() {
      queryDept({ page: 1, limit: 1000 }).then(res => {
        const { data } = res
        // 转树
        this.deptData = data.list
        this.treeData = toTree(data.list, 0)
      })
    },
    // 根据部门查询用户
    handleNodeClick(data) {
      console.log(data)
      deptUser(data.id).then(res => {
        const { data } = res
        data.forEach(item => {
          item.deptId = item.dept.deptName
        })
        this.userList = data
      })
    },
    // 获取用户信息
    getUserData() {
      getUsers({ page: this.page, limit: this.limit, nickname: this.searchForm.nickname }).then(res => {
        const { data } = res
        this.userList = data
        this.userList.forEach(item => {
          item.deptId = item.dept.deptName
        })
        this.loading = false
      })
    },
    // 删除用户
    handleDelete(data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delUser(data.id).then(res => {
          console.log(res)
          const { msg } = res
          this.$message({
            type: 'success',
            message: msg
          })
          // 获取数据
          this.getUserData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑用户处理
    editUserHandler() {
      updateUser(this.editUserForm).then(res => {
        const { msg } = res
        this.$message({ message: msg, type: 'success' })
        this.editUserVisible = false
        this.getUserData()
      })
    },
    // 打开编辑弹窗
    editDialogHandler(data) {
      this.editUserForm.nickname = data.nickname
      this.editUserForm.oaAccount = data.oaAccount
      this.editUserForm.deptId = data.dept.id
      this.editUserForm.id = data.id
      this.editUserVisible = true
    },
    restBtn() {
      this.searchForm.nickname = ''
      this.getUserData()
    },
    // 获取角色数据
    getRoleData() {
      getRole().then(res => {
        const { data } = res
        this.roleData = data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	.el-tree{
		margin-top: 10px;
	}
</style>
